<template>
  <div class="chart">
    <!-- 图表盒子 -->
    <div id="main"></div>
  </div>
</template>

<script>
import { init } from "echarts";

export default {
  data() {
    return {
      myChart: "",
    };
  },

  props: ["data"],

  methods: {
    changeSize() {
      this.myChart.resize();
    },

    mounted() {
      //页面变化触发的函数
      // window.addEventListener("resize", this.changeSize);
    },

    chart() {
      this.myChart = init(document.getElementById("main"));

      let option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },

            data: this.data.source.map(item=>{
            return{
            name: item.type,
            type: "line",
            stack: "Total",
            data: item.data,
            }
            }) 
            

          },
        ],
      };
      //   绘制图表;
      this.myChart.setOption(option);
      window.addEventListener("resize", this.changeSize);
    },
  },

  watch: {
    data(val) {
      console.log(val);
      if (val) {
        this.chart();
      }
    },
  },

  //销毁前
  beforeDestroy() {
    //解除 事件绑定
    // window.removeEventListener("resize", this.changeSize);
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
#main {
  padding: 20px;
  margin: auto;
  width: 95%;
  height: 450px;
  background: #fff;
}
</style>